<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="web-home-banner">
    <el-carousel
      :interval="0"
      type="card"
      height="400px">
      <el-carousel-item
        v-for="(v, k) in dataArr"
        :key="k"
        class="banner-item">
        <div
          :style="bgImage(v.pcHomeBannerUrl || defaultImage)"
          class="image w-image-fit">
          <p class="title">{{ v.title }}</p>
          <p class="detail">{{ v.detail }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import BannerModel from '@/models/web/BannerModel'
import { mapGetters } from 'vuex'
export default {
  name: 'WWebHomeBanner',
  inject: ['bgImage'],
  data() {
    return {
      dataArr: []
    }
  },
  computed: {
    ...mapGetters(['defaultImage'])
  },
  mounted() {
    this.getAllBanners()
  },
  methods: {
    // 获取所有数据
    getAllBanners() {
      BannerModel.loadAllModels().then((dataArr) => {
        this.dataArr = dataArr
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .web-home-banner {
    .banner-item {
      .image {
        height: 100%;
        .title {
          font-size: 30px;
          color: #fff;
          padding: 10px;
          margin: 0;
        }
        .detail {
          color: #fff;
          font-size: 18px;
          padding: 10px;
          line-height: 24px;
          margin: 0;
        }
      }
    }
  }
</style>
